<template>
  <div>
      <!-- 头部区域 -->
      <van-nav-bar fixed>
        <template #left>
          <img src="../../assets/toutiao_logo.png" alt="logo" class="logo" />
        </template>
        <template #right>
          <van-icon name="search" color="white" size="18" @click="$router.push('/search')"/>
        </template>
      </van-nav-bar>
    <!-- 22.1标签页+文章列表页 -->
    <div class="home-container">
      <van-tabs v-model="active" :sticky="true" offset-top="46">
        <van-tab :title="obj.name" v-for="obj in channelList" :key="obj.id">
          <!-- 显示的是标签对应的下属页面 -->
          <!-- 开始封装一个展示文章列表的组件，大家都用这个组件(数据动态切换) -->
          <ArticleList :channelId="obj.id"></ArticleList>
        </van-tab>
      </van-tabs>

      <!-- 22.0右侧的编辑频道的小图标 -->
      <van-icon name="plus" size="14" class="moreChannels" @click="show=true" />
    </div>

    <!-- 22.1编辑频道弹出层组件 -->
<!-- close-on-click-overlay 是否在点击遮罩层后关闭（false 不关闭） -->
<van-popup class="edit_wrap" v-model="show" :close-on-click-overlay="false" @close="closeFn">
  <div class="popup-container">
    <!-- 弹出层的头部区域 -->
    <van-nav-bar title="频道管理">
      <!-- 弹出层右上角x -->
      <template #right>
        <van-icon name="cross"
        size="14"
        color="white"
        @click="show = false" />
      </template>
    </van-nav-bar>
    <!-- 弹出层的主体区域 -->
    <div class="pop-body">
      <!-- 22.2.2数据铺设 -->
      <!-- 22.7.2绑定高亮active -->
      <ChannelEdit v-model="active"
      ref="edit"
      :channelList="channelList" :unChannelList="unChannelList"
      @closePop="show=false"
      ></ChannelEdit>
    </div>
  </div>
</van-popup>
  </div>
</template>

<script>
import { channelUserAPI, allChannelAPI } from '@/api'
import ArticleList from './ArticleList'
import ChannelEdit from './ChannelEdit'
export default {
  data () {
    return {
      active: 0,
      channelList: [], // 用户已选的频道
      show: false, // 编辑频道弹出层
      allChannelList: [] // 22.2.1所有频道
    }
  },
  // 22.2获取所有频道
  methods: {
    async getAllChannelFn () {
      const [, res] = await allChannelAPI()
      // console.log(res)
      this.allChannelList = res.data.data.channels
    },
    // 22.6监测到了弹出层关闭
    // 应该子传父找到ChannelEdit组件对象，但这里没有一定的逻辑和点击事件，用ref
    closeFn () {
      // 直接修改了组件内的变量(编辑状态消失)
      this.$refs.edit.isShow = false
    }
  },
  // 22.2.1
  computed: {
    // 筛选未选中的频道 - 得到一个数组(未选中)
    unChannelList () {
      // 收集未选的
      const arr = this.allChannelList.filter(obj => {
        const index = this.channelList.findIndex(obj2 => obj2.id === obj.id)
        // obj当前频道已经在已选频道里找到了
        if (index > -1) {
          // 给filter方法返回false，当前obj对象就不会被filter收集起来
          return false
        } else {
          return true
        }
      })
      return arr
    }
  },

  async created () {
    // ,占位符
    const [, res] = await channelUserAPI()
    console.log(res)
    this.channelList = res.data.data.channels

    // 22.2首页创建后，马上请求所有频道数据
    this.getAllChannelFn()
  },

  components: {
    ArticleList,
    ChannelEdit
  }
}
</script>

<style scoped lang="less">
.van-tabbar {
  border-top: 1px solid #f8f8f8;
}

.logo {
  height: 80%;
}

/* 点击时的红线，为了不让上面的头标签覆盖掉，给个样式 */
.home-container {
  padding-top: 46px;
}

/* 设置 tabs 容器的样式 */
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

/* 弹出层容器宽度高度铺满屏幕 */
/*频道编辑弹出层 */
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
